<template>
	<div class="layout">
    <ContainerTitle text="修改密码"></ContainerTitle>
		<div class="tableDiv">
			<div class="rowDiv">
				<div class="keyDiv">用户名</div>
				<div class="valueDiv">{{detail.userName}}</div>
				<div class="keyDiv">手机号</div>
				<div class="valueDiv">{{detail.userPhone}}</div>
			</div>
		</div>
		<el-form class="formDiv" ref="form" :model="form" :rules="rules" label-width="110px" style="text-align: left;">
			<el-form-item label="原密码：" prop="oldPassword">
				<el-input type="password" placeholder="输入原密码" v-model.trim="form.oldPassword" style="width: 360px;"></el-input>
			</el-form-item>
			<el-form-item label="新密码：" prop="newPassword">
				<el-input type="password" placeholder="密码6-18位，必须至少同时包含数字和大小写字母" maxlength="18" v-model.trim="form.newPassword" style="width: 360px;" show-password></el-input>
			</el-form-item>
			<el-form-item label="确认新密码：" prop="rawPassword">
				<el-input type="password" placeholder="确认新密码" v-model.trim="form.rawPassword" maxlength="18" style="width: 360px;" show-password></el-input>
			</el-form-item>
			<el-form-item label="">
        <Buttons @goBack="goBack" @confirm="confirm" :buttons="buttons" class="btns"></Buttons>
				<!-- <div class="btn cancel" @click="goBack">取消</div>
				<div class="btn confirm" @click="confirm">确认修改</div> -->
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
  import { getUserData, updatePwd } from "@/common/api/company.js";
  export default {
    data(){
      return {
        buttons:[
          { text: "取消", type: "normal", size: "l", method: "goBack" },
          { text: "确认修改", type: "success", size: "l", method: "confirm" },
          ],
        name: "finance",
        crumbs: [{
					label: '企业空间',
					value: 'company'
				},{
					label: '用户设置',
					value: 'userSettings'
				},{
					label: '修改密码', value: '', choose: true
				}],
				detail: {},
        form: {
					oldPassword: '',
					newPassword: '',
					rawPassword: ''
				},
				rules: {
          oldPassword: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
          ],
          newPassword: [
            { 
							required: true,
							validator: (rule, value, callback) => {
								if (value === '') {
									callback(new Error('请输入新密码'));
								// } else if(!/^(?![0-9]+$)(?![a-zA-Z]+$)(?!^[^A-z0-9]+$)[\S]{6,20}$/.test(value)) {
								} else if(
									!/^(?=.*\d)(?=.*[A-Za-z])[\x00-\xff]{6,18}$/
									.test(value)
								) {
									callback(new Error('密码6-18位，必须至少同时包含数字和大小写字母'));
								} else {
									if (this.form.rawPassword !== '') {
										this.$refs.form.validateField('rawPassword');
									}
									callback();
								}
							},
							trigger: 'blur' 
						}
          ],
					rawPassword: [
            { required: true, 
							validator: (rule, value, callback) => {
								if (value === '') {
									callback(new Error('请再次输入密码'));
								} else if (value !== this.form.newPassword) {
									callback(new Error('两次输入密码不一致!'));
								} else {
									callback()
								}
							}, 
							trigger: 'blur'
						}
          ],
        }
      }
    },
		created(){
			this.getUserData()
		},
    methods: {
			async getUserData(){
				let res = await getUserData();
      	if(res.code == 200) {
					this.detail = res.data
				}
			},
			confirm() {
				this.$refs['form'].validate(async (valid) => {
          if (valid) {
						delete this.form.rawPassword
						let res = await updatePwd(`oldPassword=${this.form.oldPassword}&newPassword=${this.form.newPassword}`);
						if(res.code == 200) {
							this.$alert('您的账户密码已修改成功，现在可以使用新密码进行登录。', '密码修改成功！', {
								confirmButtonText: '确定',
								callback: action => {
									console.log(action)
								}
							});
						} else {
							this.$message.error(res.msg)
						}
          }
        });
			},
			goBack: function(){
				this.$router.back();
			}
    },
  }
</script>
<style scoped>
  .btns{
    justify-content: left !important;
  }
  .breadcrumb {
		/* width: 1000px;
		margin: 20px 0; */
	}

	.roomDiv {
		display: flex;
		justify-content: center;
	}

	.roomDiv .leftDiv {
		width: 200px;
		text-align: left;
	}

	.roomDiv .rightDiv {
		width: 800px;
		margin-left: 30px;
	}
  .titleDiv {
		border-bottom: 2px solid #045db9;
		text-align: left;
		padding: 10px;
		font-size: 20px;
		font-weight: bold;
		color: #045db9;
		margin-bottom: 20px;
	}
  .layout {
		min-height: 100vh;
		position: relative;
		padding-bottom: 150px;
		box-sizing: border-box;
	}

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

  .btn {
    display: inline-block;
    font-size: 14px;
		text-align: center;
		cursor: pointer;
		width: 120px;
		height: 40px;
    border-radius: 3px;
  }

  .cancel {
    border: 1px solid #e9e9e9;
		background: #fff;
		color: #333;
  }

  .confirm {
		background: #045db9;
		color: #fff;
  }

	.tableDiv {
		font-size: 15px;
		border: 1px solid #eeeeee;
		color: #666666;
		margin-bottom: 40px;
	}

	.tableDiv .rowDiv {
		display: flex;
		justify-content: flex-start;
		border-bottom: 1px solid #eeeeee;
	}

	.tableDiv .rowDiv:last-of-type {
		border-bottom: none;
	}

	.tableDiv .rowDiv .keyDiv {
		flex-shrink: 0;
		padding: 10px;
		background-color: #f4f4f4;
		width: 90px;
		text-align: right;
	}

	.tableDiv .rowDiv .valueDiv {
		padding: 10px;
		width: 40%;
		text-align: left;
	}
	.backBtn {
		border: 1px solid #eeeeee;
		white-space: nowrap;
		font-size: 12px;
		height: 30px;
		width: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
	}
	.backBtn:hover {
		cursor: pointer;
		box-shadow: 0px 0px 5px #EEEEEE;
	}
</style>